<template>
  <div class="avatar" :class="avatarCls">
    <img class="img" v-lazy="url" />
    <template v-if="official.type > -1">
      <img v-if="isOfficalVerify" class="icon" src="@/assets/upzhu.png">
      <img v-if="isEnterprise" class="icon" src="@/assets/enterprise.png">
    </template>
    <template v-else>
      <template v-if="isVip">
        <i v-if="isVip" class="fa fa-vip"></i>
      </template>
    </template>
  </div>
</template>

<script>
export default {
  name: 'UserAvatar',
  props: {
    url: {
      type: String
    },
    // 官方认证的一些信息
    official: {
      type: Object,
      default () {
        return {
          desc: '',
          type: -1
        }
      }
    },
    // 是否是vip 大于0则是
    vipStatus: {
      type: Number
    },
    // 尺寸 可选 lg
    size: {
      type: String
    }
  },
  computed: {
    isVip () {
      return this.vipStatus > 0
    },
    // 官方认证的账号
    isOfficalVerify () {
      return this.official.type === 0
    },
    // 企业账号
    isEnterprise () {
      return this.official.type === 1
    },
    avatarCls () {
      return this.size ? `avatar-${this.size}` : ''
    }
  }
}
</script>

<style lang="scss" scoped>
  .avatar {
    position: relative;
    @include cover(80, 80);
    width: rem(40px);
    height: rem(40px);
    .img {
      border-radius: 50%;
    }
    .fa {
      position: absolute;
      right: rem(-3px);
      bottom: rem(-3px);
      display: block;
      color: $theme-color;
      font-size: rem(18px);
      background-color: $color-white;
      border-radius: 50%;
    }
    .icon{
      display: block;
      width: rem(18px);
      height: rem(18px);
      position: absolute;
      right: 0;
      bottom: 0;
    }
    &-lg{
      width: rem(84px);
      height: rem(84px);
      .fa{
        font-size: rem(24px);
      }
      .icon {
        width: rem(22px);
        height: rem(22px);
      }
    }
  }
</style>
